<template>
  <div class="stats-container">
    <!-- 时间显示 -->
    <div class="time-row">
      <div class="time-label">时间:</div>
      <div class="time-value">{{ currentData.times }}</div>
    </div>
    <!-- 数据展示 -->
    <div class="stats-grid">
      <dv-border-box-10
        v-for="(key, index) in productKeys"
        :key="index"
        class="stats-item"
      >
        <div class="label">{{ key.label }}</div>
        <div class="value">
          {{ currentData[key.key] }}
          <span
            v-if="previousData[key.key] !== undefined"
            :class="getArrowClass(currentData[key.key], previousData[key.key])"
          >
            <i
              v-if="currentData[key.key] > previousData[key.key]"
              class="arrow up"
            ></i>
            <i
              v-else-if="currentData[key.key] < previousData[key.key]"
              class="arrow down"
            ></i>
          </span>
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const data = ref([]);
const currentData = ref({
  times: '-',
  nevProduction: '-',
  nevSales: '-',
  bevProduction: '-',
  bevSales: '-',
  phevProduction: '-',
  phevSales: '-',
});
const previousData = ref({});

// 数据字段配置
const productKeys = [
  { key: 'nevProduction', label: 'NEV 生产量' },
  { key: 'bevProduction', label: 'BEV 生产量' },
  { key: 'phevProduction', label: 'PHEV 生产量' },
  { key: 'nevSales', label: 'NEV 销售量' },
  { key: 'bevSales', label: 'BEV 销售量' },
  { key: 'phevSales', label: 'PHEV 销售量' },
];

// 获取数据
const fetchData = async () => {
  try {
    const response = await axios.get('/api/queryAllVehicleProductionSales'); // 替换为真实的API地址
    if (response.data.code === "200") {
      data.value = response.data.data;
      updateCurrentData(); // 初始化显示第一条数据
    } else {
      console.error('数据获取失败', response.data.msg);
    }
  } catch (error) {
    console.error('请求数据时发生错误', error);
  }
};

// 更新当前和上一次数据
const updateCurrentData = () => {
  let index = 0;
  setInterval(() => {
    if (data.value.length > 0) {
      previousData.value = { ...currentData.value }; // 记录当前数据为上一条数据
      currentData.value = data.value[index]; // 更新当前数据
      index = (index + 1) % data.value.length; // 循环切换数据
    }
  }, 1500); // 每3秒切换一次
};

// 获取箭头的类名
const getArrowClass = (current, previous) => {
  if (current > previous) {
    return 'up-arrow';
  } else if (current < previous) {
    return 'down-arrow';
  }
  return '';
};

// 初始化获取数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.stats-container {
  width: 90%; /* 控制组件宽度 */
  left: 2px;
  margin: 20px auto 0; /* 上方 20px 的外边距，紧贴下边框 */
  padding: 20px; /* 内边距保持内容与边框之间的距离 */
  border-radius: 15px; /* 边框圆角 */
  background-color:transparent; /* 背景颜色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  position: absolute; /* 使用绝对定位控制组件位置 */
  bottom: 20px; /* 紧贴下边框 */
}



/* 时间行样式 */
.time-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.time-label {
  font-size: 16px;
  color: #ffffff;
  margin-right: 10px;
  font-family: 'YouYuan';
}

.time-value {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  font-family: 'YouYuan';
}

/* 数据网格样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px;
}

.stats-item {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #ffffff;
}

.label {
  font-size: 12px;
  color: #333;
}

.value {
  font-size: 16px;
  font-weight: bold;
  color: #445fb5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.up-arrow {
  color: green;
  margin-left: 5px;
}

.down-arrow {
  color: red;
  margin-left: 5px;
}

.arrow {
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.arrow.up {
  border-bottom: 10px solid green;
}

.arrow.down {
  border-top: 10px solid red;
}
</style>
